<template>
	<div class="refund-application">
		<uv-gap height="5" bgColor="transparent" />
		<view class="apply-section">
			<uv-text text="申请类型" bold="true" size="28upx"></uv-text>
			<uv-radio-group v-model="apply_type" placement="column" activeColor="red">
				<uv-radio name="1" label="退款申请" customStyle="padding:10px 0">
				</uv-radio>
				<uv-text text="申请退还已支付的服务费用" type="info" size="12"></uv-text>
				<uv-radio name="2" label="其它条件申请" customStyle="padding:10px 0">
				</uv-radio>
				<uv-text text="申请其他服务调整或补偿" type="info" size="12"></uv-text>
			</uv-radio-group>
			<uv-text text="申请原因" bold="true" size="14" customStyle="padding:10px 0"></uv-text>
			<uv-textarea v-model="apply_reason" placeholder="详细说明" :maxlength="200" />
			<uv-text text="上传凭证" bold="true" size="14" customStyle="padding:10px 0"></uv-text>
			<lst-upimg :type="4" :multiple="true" :maxCount="5" @success="e => upimgSuccess(e)">
				<view class="addImg">
					<uv-icon name="photo" color="#E7E7E7" size="60" />
					<text>添加图片</text>
				</view>
			</lst-upimg>
		</view>

		<view class="order-section">
			<uv-text text="订单信息" bold="true" size="14"></uv-text>
			<view class="flex padding2">
				<image :src="info.product_image" class="thumb" />
				<view class="flex-1 flex align-start justify-between">
					<view>
						<uv-text :text="info.product_name" color="#333" size="15" />
						<uv-text :text="info.spec_values" :custom-style="{background:'#f2f2f2',padding:'5px'}"
							color="#333" size="11" v-if="info.spec_values" />
					</view>

					<view class="jiage">
						<view class="t1">￥{{info.product_price}}</view>
						<view class="t2">x{{info.num}}</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务时间</view>
				<view class="content_info">{{info.service_time}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务地点</view>
				<view class="content_info">
					{{info.address_address}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务总额</view>
				<view class="content_info">￥{{info.total_price}}</view>
			</view>
			<view class="order-info" v-if="info.night_price">
				<view class="lbl_info">夜间调度费</view>
				<view class="content_info">￥{{info.night_price}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">实付金额</view>
				<view class="content_info">￥{{info.total_price}}</view>
			</view>
			<view class="order-info">
				<view class="orderNo" @click="showBase">
					<view class="lbl_pay">订单编号：</view>{{info.order_no}}<uv-icon :name="iconName" size="16"></uv-icon>
				</view>
				<uv-button size="mini" type="primary" plain @click="copyOrderNo" style="margin-left: 10px;">
					复制
				</uv-button>
			</view>
			<view v-if="showPayInfo">
				<view class="order-info">
					<view class="lbl_pay">支付时间：</view>
					<view class="pay_info">{{info.pay_time}}</view>
				</view>
				<view class="order-info">
					<view class="lbl_pay">支付方式：</view>
					<view class="pay_info">{{info.pay_name}}</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn-div">
				<button type="button" class="btn_sure" @click="doSubmit">提交申请</button>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getServiceInfo,
		applyForAfterSales,
		reApplyForAfterSales,
		getAfterSalesDetail
	} from '@/api'
	import {
		useRefreshStore
	} from '@/store'
	const refreshStore = useRefreshStore()
	const info = ref({})
	const showPayInfo = ref(false)
	const iconName = ref('arrow-down')
	const apply_type = ref('1')
	const apply_reason = ref('')
	const after_sales_id = ref(0)
	const images = ref([])
	const showBase = () => {
		showPayInfo.value = !showPayInfo.value
		iconName.value = iconName.value === 'arrow-down' ? 'arrow-up' : 'arrow-down'
	}
	const copyOrderNo = () => {
		uni.setClipboardData({
			data: info.value.order_no,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	const upimgSuccess = (fileList) => {
		images.value = fileList
	}
	onLoad(async (option) => {
		if (option.id) {
			info.value = (await getServiceInfo({
				order_id: option.id
			})).result
		}
		if (option.after_sales_id) {
			after_sales_id.value = option.after_sales_id
			let res = await getAfterSalesDetail({
				after_sales_id: option.after_sales_id
			})
			apply_type.value = res.result.apply_type
			apply_reason.value = res.result.apply_reason
			images.value = res.result.images
		}
	})

	const doSubmit = async () => {
		if (after_sales_id.value > 0) {
			let params = {
				id: after_sales_id.value,
				apply_type: apply_type.value,
				apply_reason: apply_reason.value,
				images: images.value.map(({
					src
				}) => src)
			}
			let res = await reApplyForAfterSales(params)
			if (res.code === 200) {
				//先设置状态再跳转
				refreshStore.setRefresh(true)
				uni.navigateTo({
					url: '/pages-home/service/ass_info?id=' + after_sales_id.value
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				})
			}
		} else {
			let params = {
				order_id: info.value.id,
				apply_type: apply_type.value,
				apply_reason: apply_reason.value,
				images: images.value.map(({
					src
				}) => src)
			}
			let res = await applyForAfterSales(params)
			if (res.code === 200) {
				//先设置状态再跳转
				refreshStore.setRefresh(true)
				uni.navigateTo({
					url: '/pages-home/service/ass_info?id=' + res.result
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.refund-application {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;
	}

	.apply-section {
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
	}

	.addImg {
		display: flex;
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #F0F0F0;

		text {
			color: #C8C8C8;
			font-size: 28upx;
		}
	}

	.order-section {
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
	}

	.padding2 {
		padding: 0 20upx;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.margin20 {
		margin-right: 20upx;
	}
	
	.thumb {
		width: 80px;
		height: 80px;
		border-radius: 3px;
		margin-right: 20upx;
	}

	.t1 {
		color: #333;
		font-size: 30upx;
	}

	.t2 {
		color: #979797;
		font-size: 24upx;
		text-align: right;
	}

	.jiage {
		margin-left: 20upx;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;

		.lbl_info {
			width: 80px;
			font-size: 24upx;
		}

		.content_info {
			flex: 1;
			text-align: right;
			font-size: 24upx;
		}

		.lbl_pay {
			width: 80px;
			color: #979797;
			font-size: 24upx;
		}

		.pay_info {
			flex: 1;
			text-align: left;
			font-size: 24upx;
		}
	}

	.orderNo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
	}

	.orderNo .lbl_pay {
		color: #979797;
	}

	.orderNo .uv-icon {
		margin-left: 10px;
	}

	.orderNo .uv-button {
		margin-left: 10px;
	}

	.total-price {
		color: #f56c6c;
		font-weight: bold;
	}

	.footer-btn {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 15px;
		.btn-div {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn_sure {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			background-color: #DE3F27;
			color: #fff;
			font-size: 28upx;
		}
	}
</style>